import { ProTable, ProTableProps } from '@ant-design/pro-components'
import type { BasicTableParams, TableListQueryParams } from './index.type'
import { useTable } from './hooks/useTable'
import { useTableHeight } from './hooks/useTableHeight'

import styles from './index.module.less'
interface Props {
  navHeight?: number
  scrollHeight?: number
  loadedHeight?: number
  proTableProps?: ProTableProps<any, any>
  request: (params: TableListQueryParams & Record<string, any>) => Promise<any>
}

export default function BasicTable({
  loadedHeight = 0,
  scrollHeight = 50,
  proTableProps,
  navHeight = 56,
  request
}: Props) {
  const { getProTableParams } = useTable()
  const { tableDom, tableScrollHeight, setTableHeight } = useTableHeight()

  function requestFn(params: BasicTableParams) {
    return request(getProTableParams(params))
  }

  return (
    <div ref={tableDom} className={styles.wrapper}>
      <ProTable
        rowKey="id"
        cardBordered
        scroll={{ y: tableScrollHeight - scrollHeight }}
        onLoad={() => setTableHeight(loadedHeight + navHeight + 44)}
        pagination={{
          defaultPageSize: 20,
          showSizeChanger: true
        }}
        {...proTableProps}
        request={requestFn}
      />
    </div>
  )
}
